<template>
  <div>
    <h2>年度总量折线图</h2>
    <LrCharts
      :height="'300px'"
      :width="'100%'"
      :options="yearOptions"
    />

    <h2>月度总量折线图</h2>
    <LrCharts
      :height="'300px'"
      :width="'100%'"
      :options="monthOptions"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 路径根据你的实际目录结构调整
import LrCharts from '@/components/echars copy.vue'

// 年度总量数据
const yearOptions = ref({
  title: { text: '年度总量' },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['2019', '2020', '2021', '2022', '2023']
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: '总量',
      type: 'line',
      data: [120, 132, 101, 134, 90]
    }
  ]
})

// 月度总量数据
const monthOptions = ref({
  title: { text: '月度总量' },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: [
      '1月', '2月', '3月', '4月', '5月', '6月',
      '7月', '8月', '9月', '10月', '11月', '12月'
    ]
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: '总量',
      type: 'line',
      data: [10, 12, 15, 13, 16, 18, 20, 19, 17, 15, 14, 16]
    }
  ]
})
</script>